<template>
  <div class="page">
    <div class="title-box">个人信息</div>
    <Form class="From" :validation-schema="mySchema" v-slot="{errors}" ref="FormRef">

      <div class="From-header">
        <div class="dim" @click="editAvatar()">
          <!-- 头像区域 -->
          <avatar class="avatar"  v-if="profile.avatar" :url="profile.avatar"/>
          <!-- 用户没有自定义头像 -->
          <avatar class="avatar"  v-else/>
        </div>

        <div class="message">
            <div class="item" @click="showFollow()">
              <div class="header">关注</div>
              <div class="num">{{ profile.follow.length }}</div>
            </div>
            <div class="item" @click="showFans()">
              <div class="header">粉丝</div>
              <div class="num">{{ profile.fans.length }}</div>
            </div>
            <div class="item" @click="showFriends()">
              <div class="header">朋友</div>
              <div class="num">{{ profile.friends.length }}</div>
            </div>
        </div>
      </div>
      <div class="From-item">
        <span class="option">用户id：</span>
        {{profile.id}}
      </div>
      <div class="From-item">
        <span class="option">注册日期：</span>
        {{day(profile.regday).format('YYYY-MM-DD')}}
      </div>
      <div class="From-item">
        <span class="option">用户手机号：</span>
        {{profile.mobile}}
      </div>
      <div class="From-item">
      <span class="option">用户昵称：</span>
      <Field type="text" v-model="profile.username" name="username"/><i v-if="!errors.username" class="iconfont success">&#xe66d;</i>
      <div class="errmessage" v-if="errors.username">
        <i class="iconfont errmessage">&#xe66c;</i> {{ errors.username }}</div>
      </div>

      <div class="From-item">
        <span class="option">用户邮箱：</span>
        <Field type="text" v-model="profile.email" name="email" /><i v-if="!errors.email" class="iconfont success">&#xe66d;</i>
        <div class="errmessage" v-if="errors.email">
          <i class="iconfont errmessage">&#xe66c;</i> {{ errors.email }}</div>
      </div>

      <div class="From-item">
        <button type="button" @click="submitProfile()">提交</button>
        <button type="button" @click="resetForm()">重置</button>
      </div>
    </Form>
  </div>

<!-- 弹出对话框修改头像 -->
<Dialog
:show= showDialog
@confirm="confirm"
@cancel="cancel"
:showCancel="true"
:title="'修改头像'" :confirmText="`确认修改`" :cancelText="`关闭`">
<!-- 修改头像预览 -->
<editAvatar></editAvatar>
</Dialog>

<!-- 显示关注列表/粉丝列表/朋友列表弹出框-->
<userlistDialog
:show-modal="showuserlist"
:title="userlistType"
:indexlist="porplist"
@close="showuserlist = false"
></userlistDialog>
</template>
<script>
// import { VueCropper } from 'vue-cropper'
import editAvatar from './user-avatar.vue'
import avatar from '@/components/library/avatar.vue'
import { getUserInfo, editUserInfo, updateAvatar } from '@/api/user'
import popmessage from '@/components/library/message'
import Dialog from '@/components/library/dialog.vue'
// 引入用户列表弹出框
import userlistDialog from './userlist-dialog.vue'
// 处理头像所需要的包导入
// import { vuecropper } from 'vue-cropper'
// 添加验证表单所需要用的那些组件
import { Form, Field } from 'vee-validate'
import veeSchema from '@/utils/vee-validate-schema'
import { ref } from 'vue'
export default {
  name: 'user-edit',
  components: {
    avatar, Form, Field, Dialog, editAvatar, userlistDialog
  },
  data () {
    return {
      FormRef: ref(null),
      mySchema: {
        username: veeSchema.username,
        email: veeSchema.email
      },
      profile: {
        username: '',
        mobile: '',
        avatar: '',
        id: '',
        email: '',
        fans: [],
        follow: [],
        friends: []
      },
      // 控制头像弹出框
      showDialog: false,
      // 显示渲染列表
      showuserlist: false,
      userlistType: '',
      porplist: []
    }
  },
  methods: {
    initInfo () {
      getUserInfo().then(res => {
        this.profile = res.data
        this.profile.follow = JSON.parse(this.profile.follow)
        this.profile.fans = JSON.parse(this.profile.fans)
        this.profile.friends = JSON.parse(this.profile.friends)
      })
    },
    submitProfile () {
      // const store = useStore()
      // console.log(this.$refs.FormRef)
      const username = this.profile.username
      const email = this.profile.email
      this.$refs.FormRef.validate().then(res => {
        if (res.valid) {
          // popmessage({ type: 'success', str: '成功提交表单' })
          editUserInfo({ username, email }).then(res => {
            if (res.data.status === 0) {
              popmessage({ type: 'success', str: '修改个人信息成功！' })
              const params = {
                username: username,
                email: email
              }
              this.$store.commit('user/editUser', params)
            } else {
              popmessage({ type: 'error', str: res.data.message })
            }
          })
        } else {
          popmessage({ type: 'error', str: '请填入合适的数据' })
        }
      })
    },
    resetForm () {
      getUserInfo().then(res => {
        this.profile = res.data
        this.profile.follow = JSON.parse(this.profile.follow)
        this.profile.fans = JSON.parse(this.profile.fans)
        this.profile.friends = JSON.parse(this.profile.friends)
      })
      popmessage({ type: 'warn', str: '已重置表单' })
    },
    editAvatar () {
      this.showDialog = true
    },
    confirm (show) {
      this.showDialog = show
      this.profile = this.$store.state.user.profile
      updateAvatar({ avatar: this.profile.avatar }).then((res) => {
        // console.log(res.data)
        if (res.data.status === 1) {
          popmessage({ type: 'error', str: '修改失败' })
        } else {
          popmessage({ type: 'success', str: '修改头像成功' })
        }
      })
    },
    cancel (show) {
      this.showDialog = show
      this.$store.commit('user/updateAvatar', this.profile.avatar)
    },
    showFollow () {
      this.showuserlist = true
      this.userlistType = '关注'
      this.porplist = this.profile.follow
      // console.log(this.profile.follow)
    },
    showFans () {
      this.showuserlist = true
      this.userlistType = '粉丝'
      this.porplist = this.profile.fans
    },
    showFriends () {
      this.showuserlist = true
      this.userlistType = '朋友'
      this.porplist = this.profile.fans
    }
  },
  created () {
    this.initInfo()
  }
}
</script>
<style scoped lang="less">
.page{
  border :1px solid #e9e9e9;
  margin-left: 20px;
  width: 1000px;
  background: white;
  .title-box{
    width: 100%;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    text-indent: 10%;
    font-family: '钉钉进步体';
    color: #6c6c6c;
    border-bottom: 1px solid #e9e9e9;
  }
  .From{
    width: 1000px;
    display: flex;
    flex-direction: column;
    padding-left: 10%;
    padding-top: 20px;
    input{
      background-color: #f0f0f0;
      outline-style: none;
      border: none;
      padding: 7px 0px;
    }
    button{
      margin: 10px;
    }
    .From-header{
      height: 150px;
      display: flex;
      flex-direction: row;
      .avatar{
        height: 100px;
        width: 100px;
      }

      .avatar:hover{
        cursor: pointer;
        background: #000;
        border-radius: 100%;
        height: 100px;
        width: 100px;
        border: none;
      }
      .message{
        width: 600px;
        padding-left: 30px;
        padding-top: 10px;
        display: flex;
        .item{
          cursor: pointer;
          width: 100px;
          height: 100px;
          background-color: #fff;
          margin-left: 20px;
          border: 1px solid #adadad;
          border-radius: 20px;
          .header{
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-family: '钉钉进步体';
            color: #6c6c6c;
          }
          .num{
            padding: 10px;
            height: 70px;
            line-height: 50px;
            font-size: 30px;
            text-align: center;
          }
          &:hover{
            color:#3e87e5;
          }
        }
      }
    }
    .From-item{
      font-size: 14px;
      height: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
      button{
        cursor: pointer;
        border: none;
        height: 40px;
        width: 100px;
        &:active{
          background-color: #bdbdbd;
        }
      }
    }
  }
}

.errmessage /deep/{
  margin-left: 36px;
  color: rgb(255, 88, 88);
}
.success /deep/{
  color: rgb(137, 244, 137);
}

.dim:hover{
  opacity:0.4;
  filter: alpha(opacity=80);
  border-radius: 100%;
  height: 100px;
  width: 100px;
  border: none;
}

.option{
  font-family: '钉钉进步体';
  color: #6c6c6c;
}
//禁止头像hover事件

</style>
